<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
    <link rel="stylesheet" href="../bootstrap-4.2.1-dist/css/bootstrap.css">
    <script src="../bootstrap-4.2.1-dist/js/jquery-3.4.1.js"></script>
    <script src="../bootstrap-4.2.1-dist/js/popper.js"></script>
    <script src="../bootstrap-4.2.1-dist/js/bootstrap.js"></script>
<style>
    body{
        margin:0;
        padding:0;
        font-family:sans-serif;
        background-image: url(../img/3.jpg);
        background-size:cover;
        background-position: center;
    }
    .sign-up-form
    {
        width:400px;
        box-shadow:0 1rem 3rem rgba(0,0,0,0.175);
        background:rgb(70, 69, 69);
        padding:20px;
        margin:8% auto 0;
        text-align:center;
        opacity:2px;
    }
    .sign-up-form h1
    {
        color:white;
        margin-bottom:25px;

    }
    .input-box
    {
        border-radius:20px;
        padding:10px;
        margin:10px 0;
        width:100%;
        border:1px solid #999;
        outline:none;
    }
    .button
    {
        color:#fff;
        width:100%;
        padding:10px;
        border-radius:20px;
        font-size:15px;
        margin:10px 0;
        outline:none;
        cursor:pointer;
        background-color: #1c88d4;
    }
.button-btn
{
    color:#fff;
    width:100%;
    padding:10px;
    border-radius:20px;
    font-size:15px;
    margin:10px 0;
    outline:none;
    cursor:pointer;
    background-color:#21afde;
}
a{
    text-decoration:none;
}
hr{
    margin-top:30px;
    width:80%;
    background-color: white;
}
.or{
  color:white;
  width:30px;
  margin:-19px auto 10px;
}
img
{
    width:70px;
    margin-top:-40px;
}
.border
{
    margin-top:-20px;
    font-weight: 2px;
}
    </style>
    <script type="text/javascript">
        function checker()
       {
           var name=document.getElementById('User_name');
           if(name.value=="")
           {
              alert("用户名不能为空");
              return;
           }
            var z=document.getElementById('Password');
          if(z.value=="")
          {
              alert("密码不能为空");
              return;
          }
      }
      </script>
</head>
 <body class="container"> 
   <div class="sign-up-form">
      <div class="border border-primary rounded-circle" ><img src="../img/1.png"></div>
       <h1>员工宿舍管理</h1>
            <form method="post" id="login-box" action="${pageContext.request.contextPath}/user/login">
                <div style="color: red;font-weight:bold; ">${error}</div>
            <input  name="cid" id="cid" type="text" class="input-box" placeholder="请输入用户名">
            <input  name="password" id="password" type="password" class="input-box" placeholder="请输入密码">

            <input type="submit" name="btn0k" value="员工登录" class="button"
            onClick="javascript:checker('index.html')">
            <hr>
            <p class="or">OR</p>
            <input type="submit" name="btn0k" value="管理员登录" class="button-btn"
 onClick="javascript:checker('index.html')">
            <p style="color:white">还没有账号?<a href="#">  << 注册 </a></p>
            </form>
</body>
</html>